<template>
  <div>
    <!--条件筛选-->
    <TopFilter ref="topFilter" :list="topFilterList" :cols="3" labelWidth="110" @filterChange="changeHandle" @onCollapse="collapseHandle"></TopFilter>
    <button-area :style="{ paddingLeft: '80px' }"></button-area>
    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'records'"
      :isSelectColumn="false"
      columnsRef="jzySeries"
      :isExportExcel2="true"
      :rowstyles="rowstyles"
      :onSyncTableData="syncPjFun"
      :exportFileName="'用户诉求.xlsx'"
      :onColumnsChange="columns => (this.columns = columns)"
      :onRowSelectChange="selectData"
    >
    </FilterTable>

    <Drawer
      :title="dialogTitle"
      :visible.sync="showAddNew"
      :width="1100"
      :closable=true
      destroyOnClose
      :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
    >
      <demandesAdd  :type="handleType" :rowData="formData"  @close="dialogClose" />
    </Drawer>

    <BaseDialog
      :visible.sync="isdealwith"
      :title="'工单处理'"
      width="600px"
      destroyOnClose
      :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
    >
      <dealwith  @close="closeDealwith('CL')" :rowData="rowDatas" />
    </BaseDialog>

    <BaseDialog
      :visible.sync="isdealwithClose"
      :title="'申请关闭'"
      width="600px"
      destroyOnClose
      :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
    >
      <dealwithSuccess  @close="closeDealwith('WC')" :rowData="rowDatas1" />
    </BaseDialog>
  </div>
</template>

<script>
import { authority } from '@/utils/authMixin';
import { dictionary } from '@/utils/dictMixin';
import { demands,status,serious,originate } from '@/pages/demandes/userDemandes/register/selectValue';
import { region } from '@/api/cms-common/region';
import { getRegisterList,getSelectList} from '@/api/customerService/demandes/register';
import demandesAdd from './demandesAdd'
import dealwith from './dealwith'
import dealwithSuccess from './dealwithSuccess'
export default {
  name: 'registerindex',
  mixins: [authority,dictionary,region],
  components: {demandesAdd,dealwith,dealwithSuccess},
  data() {
    return {
      rowstyles:[],
      isdealwithClose:false,
      rowDatas1:{},
      rowDatas:{},
      isdealwith:false,
      dialogTitle:'',
      showAddNew:false,
      formData:{},
      handleType:'',
      topFilterList: this.createTopFilters(),
      columns: this.createTableColumns(),
      fetchApi: getRegisterList,
      fetchParams: {demandsSource:'2'},
      scenceList:[], //场景下拉
      messageSourceList:[],// 来源下拉
      list:[],
      dealwith:{
        demandsNo:'',// 单号
        demandsId:'',// 工单ID
        handleType:'',// 处理类型
        demandsStatus:'',// 工单状态
        remark:'' ,// 备注,
        wheterDemands:'' //是否无效需求
      }
    };
  },
  created() {
    this.findSlectValue()
  },
  methods: {
    syncPjFun(details){
      if (!details.length) return;
      details.forEach(x => {
        if (x.ifmark === 'Y') {
          this.rowstyles.push({ row: x, styles: { background: '#FF0000' } });
        }
      });
    },
    // 查询下拉选项的值
    findSlectValue(){
      getSelectList({}).then(response=>{
        this.columns.find(item=>item.dataIndex==='demandsScenes').dictItems=response.data.cjList
        this.columns.find(item=>item.dataIndex==='infoSource').dictItems=response.data.lyList
        this.columns.find(item=>item.dataIndex==='model').dictItems=response.data.cxList
      })
    },
    dialogClose(){
      this.showAddNew = false
      // 重新加载
      this.fetchParams = { ...this.fetchParams };
    },
    selectData(val) {
      this.tableData = val;
    },
    createTopFilters() {
      return [
        {
          type: 'INPUT',
          label: '工单号:',
          fieldName: 'demandsNo'
        },
        {
          type: 'SELECT',
          label: '工单状态:',
          fieldName: 'demandsStatus',
          placeholder: '请选择...',
          itemList: status
        },
        {
          type: 'RANGE_DATE',
          label: '创建日期',
          fieldName: 'createdAt1|createdAt2',
          valueFormat: 'yyyy-MM-dd',
          placeholder: '请选择'
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 200,
          fixed: 'left',
          render: (props, h) => {
            return (
              <div>
              <multiuse-button size="mini" type="text" onClick={() => this.detailHandle(props.row, 'show')}>
            工单详情
            </multiuse-button>
            <multiuse-button   disabled={props.row.demandsStatus!='0' && props.row.demandsStatus!='1' } size="mini" type="text" onClick={() => this.dealWith(props.row, '1','update_progress')}>
            工单处理
            </multiuse-button>
            <multiuse-button  disabled={props.row.demandsStatus!='0' && props.row.demandsStatus!='1'} size="mini" type="text" onClick={() => this.dealWith(props.row, '2','request_close')}>
            申请关闭
            </multiuse-button>
            </div>
          );
          }
        },
        {
          title: '发起方',
          dataIndex: 'demandsSource',
          sorter: true ,
          dictItems:originate
        },
        {
          title: '工单号',
          dataIndex: 'demandsNo',
          sorter: true,
          width: 160
        },
        {
          title: '严重程度',
          dataIndex: 'problemGarde',
          sorter: true,
          dictItems:serious
        },
        {
          title: '工单状态',
          dataIndex: 'demandsStatus',
          sorter: true,
          dictItems:status
        },
        {
          title: '是否超时',
          dataIndex: 'iftimeout',
          sorter: true,
          dictItems:demands
        },
        {
          title: '用户姓名',
          dataIndex: 'userName',
          sorter: true,
          width: 160
        },
        {
          title: '联系方式',
          dataIndex: 'connectPhone',
          sorter: true,
          width: 160
        },
        {
          title: '用户诉求详情',
          dataIndex: 'userDemandsDetails',
          sorter: true,
          width: 160
        },
        {
          title: '城市',
          dataIndex: 'cityName',
          sorter: true
        },
        {
          title: '车型',
          dataIndex: 'model',
          sorter: true,
          dictItems:[],
          width: 160
        },
        {
          title: 'VIN',
          dataIndex: 'vin',
          sorter: true,
          width: 160
        },
        {
          title: '场景',
          dataIndex: 'demandsScenes',
          sorter: true,
          dictItems:[]
        },
        {
          title: '信息来源',
          dataIndex: 'infoSource',
          sorter: true,
          dictItems:[]
        },
        {
          title: '当前责任人',
          dataIndex: 'responsible',
          sorter: true,
          width: 160
        },
        {
          title: '创建人姓名',
          dataIndex: 'createName',
          sorter: true,
          width: 160
        },
        {
          title: '创建人时间',
          dataIndex: 'createdAt',
          dateFormat: 'yyyy-MM-dd HH:mm:ss',
          sorter: true,
          width: 160
        },
        {
          title: '更新时间',
          dataIndex: 'updatedAt',
          dateFormat: 'yyyy-MM-dd HH:mm:ss',
          sorter: true,
          width: 160
        },
        {
          title: '是否无效需求',
          dataIndex: 'wheterDemands',
          sorter: true,
          dictItems:demands
        },
      ];
    },
    changeHandle(val) {
      this.fetchParams = Object.assign({},{demandsSource:'2'}, val);
    },
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    },
    // 新增
    detailHandle(item,type){
      this.handleType = type;
      this.showAddNew = true
      this.formData = item;
      this.dialogTitle='详情'
    },
    // 工单处理过程
    dealWith(item,status,dealWithType){
      this.dealwith.demandsId=item.id
      this.dealwith.handleType=dealWithType
      this.dealwith.demandsStatus=status
      this.dealwith.demandsNo=item.demandsNo
     if (status==='1'){
       this.isdealwith=true
       this.rowDatas = this.dealwith
     }else{
       this.isdealwithClose=true
       this.rowDatas1 = this.dealwith
     }
    },
    // 处理过程返回
    closeDealwith(params){
      if (params==='CL'){
        this.isdealwith=false
      }else{
        this.isdealwithClose=false
      }
      this.changeHandle()
    },
  }
};
</script>

<style lang="less">
</style>
